<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <img src="./6.jpg" width="250" height="300">
        <button class="full">全屏显示</button>
        <button class="cancel">取消全屏</button>
    </div>
</body>
</html>
<script>
    // 与浏览器有兼容性问题

    // 第一步 获取元素
    var div = document.querySelector('div');
    var full = document.querySelector('.full');
    var cancel = document.querySelector('.cancel');

    // 第二步 绑定点击事件
    // 全屏
    full.addEventListener('click',function(){
        // 做个兼容处理
        if (div.requestFullscreen) {
            div.requestFullscreen(); //正常浏览器
        } else if (div.webkitRequestFullScreen) {
            div.webkitRequestFullScreen(); //webkit内核 浏览器
        }else if (div.mozRequestFullScreen) {
            div.mozRequestFullScreen(); //moz内核
        }
    })
    // 注意；取消全屏 只和document有关 与元素无关
    cancel.addEventListener('click',function(){
        document.webkitCancelFullScreen();
    })
</script>